In SvelteKit, +page.svelte and +layout.svelte are special files used to define pages and layouts for routes. They are part of SvelteKit’s file-based routing system.
+page.svelte defines the content for a specific route. Each +page.svelte file corresponds to a URL path in your application. You can also define a +page.js or +page.ts file alongside it to load data for that page.
+layout.svelte defines a layout wrapper for all pages in its directory and nested subdirectories. It is useful for shared UI elements like headers, footers, or navigation menus.
Layouts can be nested. A +layout.svelte file in a subdirectory overrides or extends the parent layout. This allows you to have specific layouts for sections of your site while keeping a common outer layout.
+page.sveltefiles define the content of individual routes.+layout.sveltefiles wrap pages to provide shared UI elements.Use
<slot />in layouts to inject page content dynamically.Nested layouts allow flexible, section-specific designs.
Data can be loaded using corresponding
+page.jsor+layout.jsfiles for server-side or client-side data fetching.